<template>
  <div class="divuser">
    <input
      :type="type"
      :placeholder="UserText"
      v-model="Putval"
      :class="isValid?'':'error'"
      @blur="showerr"
    />
    <!-- 如果不是data里面的属性要'' -->
  </div>
</template>

<script>
export default {
  props: ["UserText", "type", "rule", "errMsg"],
  data() {
    return {
      Putval: "",
      isValid: true
    };
  },
  methods: {
    showerr() {
      //   if (!this.isValid) {
      //     console.log(this.errMsg);
      //     this.$toast.fail(this.errMsg);
      //   }
    }
  },
  watch: {
    Putval(newval) {
      const regExp = new RegExp(this.rule);
      this.isValid = regExp.test(newval);
      if (!regExp.test(this.Putval)) {
        console.log(this.errMsg);
      }
      this.$emit("valChanged", newval);
    }
  }
};
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.divuser {
  padding: 0 6.667vw;

  input {
    font-size: 5vw;
    line-height: 11.111vw;
    margin-bottom: 2.778vw;
    width: 100%;
    border: none;
    outline: none;
    border-radius: 11.111vw;
    background-color: rgb(230, 239, 247);
    text-indent: 1em;
  }
  .error {
    border: 2px solid rgb(243, 170, 170);
  }
}
</style>